<template>
	<view class="random_join_record_box">
		<Tips/>
		<view class="header_join">
			<view class="top">
				<MyNull height="calc(20vh)" :img="isJoined ? 'joinedRandomLots.png' : 'createRandomLots.png'"/>
				<view class="right">
					<view class="tip title text_ellipsis">
						{{voteInfo?.title || ''}}
					</view>
					<view v-if="voteInfo?.voteDesc" style="display: flex;align-items: center;" @click="()=>descModelFlag=Math.random()">
						<MyIcons size="26rpx" :src="joinSystemPath('desc_b.png')" />
						<view class="tip text_ellipsis">
							{{voteInfo?.voteDesc || ''}}
						</view>
					</view>
					<view class="tip text_ellipsis" style="color: #FFFFFF;margin-top: 6rpx;">
						该投票的配置如下:
					</view>
					<view class="tip text_ellipsis">
						{{voteInfo.isHiddenUserName===VoteIsHiddenUserName.IS_HIDDEN ? '匿名投票' : '实名投票'}}、
						{{voteInfo.isMult===VoteIsMult.IS_MULT ? '支持多选' : '只支持单选'}}
					</view>
					<view class="tip text_ellipsis">
						{{joineredNums}}/{{voteInfo?.limitJoinNums}}人已参与
					</view>
					<view class="tip text_ellipsis">
						{{voteInfo.resultViewType === VoteResultView.JOINED_VIEW ? '投票后可看投票结果' : '活动结束后可看投票结果'}}
					</view>
				</view>
			</view>
		</view>
		<view class="content_join">
			<AdBanner width="100%" diyStyle="margin: -20rpx 0rpx 20rpx 0;"/>
			<view class="vote_item" v-for="item in voteInfo.joinContent" :key="item.id">
				<view 
					class="top"
					@click="()=>chooseVoteFun(item.id)"
					:style="
						`grid-template-columns:${voteInfo.type === VoteType.IMG_WORD ? '150rpx 1fr 130rpx;' : '1fr 130rpx;'}
						 border-color:${chooseVoteIds.includes(item.id) ? primary_light_color : primary_line_color};
						 background-color: ${chooseVoteIds.includes(item.id) ? 'rgba(132,213,214,0.2)' : '#FFFFFF'};
						 `
				">
					<view class="img" v-if="voteInfo.type === VoteType.IMG_WORD">
						<Avatar
							size="150rpx" 
							:isAllowPreview="true"
							radius="10rpx"
							:fileName="item.img"
							:isStop="true"
							:joinUrlFun="joinVoteImg"/>	
					</view>
					<view class="name text_ellipsis">
						{{item.name}}
					</view>
					<!-- 参与后可看总票数或者创建者 -->
					<view class="nums" v-if="voteInfo.resultViewType===VoteResultView.JOINED_VIEW">
						{{
							isJoined || isCreater
							? changeNums(item.joinContent.length,100)+'票'
							: '***票'
						}}
					</view>
					<!-- 该活动结束后可看总票数或创建者 -->
					<view class="nums" v-else>
						{{
							voteInfo.state===VoteDataState.OVER || isCreater
							? changeNums(item.joinContent.length,100)+'票'
							: '***票'
						}}
					</view>
				</view>
				<view 
					class="footer"
					>
					<template v-if="
					<!-- 匿名+活动结束后+活动结束后 -->
					(
					voteInfo.isHiddenUserName===VoteIsHiddenUserName.IS_HIDDEN
					&& voteInfo.resultViewType === VoteResultView.OVER_VIEW
					&& (voteInfo.state === VoteDataState.OVER) && false
					)
					||
					<!-- 匿名+活动结束后+个人参与后-->
					(
					voteInfo.isHiddenUserName===VoteIsHiddenUserName.IS_HIDDEN
					&&voteInfo.resultViewType === VoteResultView.OVER_VIEW
					&& item.joinContent.filter(i2=>i2.user_id===user_store.userInfo.id).length 
					)
					||
					<!-- 匿名+活动参与后+参与后 -->
					(
					voteInfo.isHiddenUserName===VoteIsHiddenUserName.IS_HIDDEN
					&& voteInfo.resultViewType === VoteResultView.JOINED_VIEW
					&& item.joinContent.filter(i2=>i2.user_id===user_store.userInfo.id).length 
					)
					<!-- 实名+活动参与后-->
					||
					(
					voteInfo.isHiddenUserName===VoteIsHiddenUserName.NO_HIDDEN
					&& voteInfo.resultViewType === VoteResultView.JOINED_VIEW
					&& isJoined
					)
					||
					<!-- 实名+活动结束后+个人参与后 -->
					(
					voteInfo.isHiddenUserName===VoteIsHiddenUserName.NO_HIDDEN
					&& voteInfo.resultViewType === VoteResultView.OVER_VIEW
					&& item.joinContent.filter(i2=>i2.user_id===user_store.userInfo.id).length 
					)
					||
					<!-- 实名+活动结束后+结束 -->
					(
					voteInfo.isHiddenUserName===VoteIsHiddenUserName.NO_HIDDEN
					&& voteInfo.resultViewType === VoteResultView.OVER_VIEW
					&& voteInfo.state === VoteDataState.OVER
					)
					">
						<view 
							class="footer_border"
							@click="()=>viewJoinerFun(item.joinContent)"
							v-if="item.joinContent.length"
						>
							<view 
								key="7" 
								class="user" 
								style="margin: 0 5rpx 0 5rpx;">
								<MyIcons size="44rpx" :src="joinSystemPath('rightMenu.png')" />
							</view>	
							<template v-for="(item,index) in item.joinContent" :key="item.user_id">
								<view 
									v-if="
										<!-- 匿名+自己参与了 -->
										(voteInfo.isHiddenUserName===VoteIsHiddenUserName.IS_HIDDEN && item.user_id===user_store.userInfo.id)
										"
									class="user"
									:key="item.user_id"
								>
									<Avatar
										:fileName="item.user_avatar"
										size="44rpx"
										radius="44rpx"/>
								</view>
								<template v-else>
									<view
										v-if="
										(
										<!-- 实名+活动结束后+个人参与后 -->
										(
										voteInfo.isHiddenUserName!==VoteIsHiddenUserName.IS_HIDDEN
										&& voteInfo.resultViewType === VoteResultView.OVER_VIEW
										&& item.user_id===user_store.userInfo.id
										)
										||
										<!-- 实名+活动结束后+结束后 -->
										(
										voteInfo.isHiddenUserName!==VoteIsHiddenUserName.IS_HIDDEN
										&& voteInfo.resultViewType === VoteResultView.OVER_VIEW
										&& voteInfo.state===VoteDataState.OVER
										)
										||
										<!-- 实名+个人参与后+参与后 -->
										(
										voteInfo.isHiddenUserName!==VoteIsHiddenUserName.IS_HIDDEN
										&& voteInfo.resultViewType === VoteResultView.JOINED_VIEW
										&& isJoined
										)
										)
										"
										key="item.user_id" 
										class="user"
									>
										<Avatar
											:fileName="item.user_avatar"
											size="44rpx"
											radius="44rpx"/>
									</view>										
								</template>
							</template>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="footer_share">
			<template v-if="chooseVoteIds.length">
				<button class="invite_joiner" @click="()=>joinVote()">提交投票</button>
			</template>
			<template v-else>
				<button class="invite_joiner" open-type="share">分享给室友</button>
				<button class="copy" @click="()=>copyVote()">复制该投票</button>	
			</template>
		</view>
		<MyModal :openModalFlag="descModelFlag" :okFun="()=>descModelFlag=-Math.random()" key="1_m">
			<template #title>
				投票描述
			</template>
			<template #content>
				<view :style="`color: ${primary_text_color}`">
					{{voteInfo.voteDesc}}
				</view>
			</template>
		</MyModal>
		<MyModal :openModalFlag="viewJoinerModel" :okFun="()=>viewJoinerModel=-Math.random()" key="2_m">
			<template #title>
				全部投票者
			</template>
			<template #content>
				<view v-for="item in viewJoiner" :key="item.user_id" class="join_box">
					<Avatar
						:fileName="item.user_avatar"
						size="68rpx"
						radius="44rpx"/>
					<view class="user_name text_ellipsis">
						{{item.nick_name_by_dormitory}}
					</view>
				</view>
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onHide,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		nextTick, 
		ref,
		onUnmounted,
		computed
	} from 'vue'
	
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import TipInfo from '@/components/TipInfo/TipInfo.vue'
	import MyInput from '@/components/MyInput/MyInput.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	
	import {
		joinSystemPath,
		joinAvatarPath,
		joinVoteImg
	} from '@/utils/imgJoinName.js'
	import {
		verifyIsLogin,
		verifyIsShowChooseAd
	} from '@/hooks/verify.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {
		userStore
	} from '@/stores/user'
	
	import {
		openMessageVoteOver
	} from '@/utils/messageAuth.js'
	import {
		changeNums
	} from '@/utils/changeData.js'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		RandomLotsState,
		VoteDataState,
		VoteIsMult,
		VoteIsHiddenUserName,
		VoteResultView,
		VoteType,
	} from '@/enum/GlobalEnum.js'
	
	import MyItemVue from '../../../components/MyItem/MyItem.vue'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_hot_color,
		primary_light_color,
		primary_main_bgc,
		primary_shallow_color,
		shallow_text_color,
		primary_text_color,
		primary_line_color
	} = dynamicStyle_store.dormitoryStyle
	
	const dormitoryAllId=uni.getStorageSync('homeData')
	
	const chooseVoteIds=ref([])
	const descModelFlag=ref(-1)
	const viewJoinerModel=ref(-1)
	const timer = ref(null)
	const voteId=ref('')
	const initFlag=ref(false)
	const viewJoiner=ref([])
	const voteInfo=ref({
		joinContent:[]
	})
	const isCreater = computed(()=>voteInfo.value.user_id===user_store.userInfo.id)
	const joineredNums = computed(()=>{
		const data = voteInfo.value.joinContent
		const users = []
		for(let i=0;i<data.length;i++){
			for(let j=0;j<data[i]?.joinContent?.length || 0;j++){
				users.push(data[i].joinContent[j].user_id)
			}
		}
		const len = [...new Set(users)].length
		return len
	})
	const isJoined = computed(()=>{
		const data = voteInfo.value.joinContent
		for(let i=0;i<data.length;i++){
			for(let j=0;j<data[i]?.joinContent?.length || 0;j++){
				if(data[i].joinContent[j].user_id===user_store.userInfo.id){
					if(!initFlag.value && voteInfo.value.isHiddenUserName === VoteIsHiddenUserName.IS_HIDDEN){
						initFlag.value = true
						setTimeout(()=>{
							uni.$emit('tips','该投票活动是匿名投票，投票人上将只会显示您的投票','info',3000)
						},1000)
					}
					return true
				}
			}
		}
		return false
	})
	
	const chooseVoteFun=(id)=>{
		if(isJoined.value){
			return
		}
		const index = chooseVoteIds.value.indexOf(id)
		if(index!==-1){
			chooseVoteIds.value.splice(index,1)
		}else{
			if(voteInfo.value.isMult === VoteIsMult.IS_MULT){
				chooseVoteIds.value.push(id)
			}else{
				chooseVoteIds.value=[id]
			}
		}
	}
	
	//查看所有参与者
	const viewJoinerFun=(data)=>{
		viewJoinerModel.value = Math.random()
		if(voteInfo.value.isHiddenUserName===VoteIsHiddenUserName.IS_HIDDEN){
			viewJoiner.value = data.filter(item=>item.user_id === user_store.userInfo.id)
		}else{
			if(voteInfo.value.isHiddenUserName!==VoteIsHiddenUserName.IS_HIDDEN
			&& voteInfo.value.resultViewType === VoteResultView.OVER_VIEW 
			&& voteInfo.value.state !==VoteDataState.OVER){
				viewJoiner.value = data.filter(item=>item.user_id === user_store.userInfo.id)
			}else{
				viewJoiner.value = data
			}
		}
	}
	
	const submit=async()=>{
		if(!chooseVoteIds.value.length){
			uni.$emit('tips','请先选择要投的票','warn')
			return
		}
		verifyIsShowChooseAd(getCurrentPages(),'参与投票')
		const {data,success} = await dormitoryModel.postJoinVote({
			ids:chooseVoteIds.value
		},voteId.value)
		if(success){
			uni.$emit('tips',data,'success')
			chooseVoteIds.value=[]
			getVoteInfo()
		}
	}
	
	const joinVote=()=>{
		openMessageVoteOver(submit)
	}
	
	const getVoteInfo=async()=>{
		const {data,success} = await dormitoryModel.getVoteInfo({},voteId.value)
		if(success){
			voteInfo.value = data
			if(data.state !== VoteDataState.GOING){
				clearInterval(timer.value)
			}
		}
	}
	
	const copyVote=()=>{
		if(voteInfo.value.id){
			uni.redirectTo({
				url:"/pages/Dormitory/CreateVote/CreateVote?id="+voteInfo.value.id
			})			
		}
	}

	onShareAppMessage((res)=>{
		return {
			  title: '来投个票：'+randomLotsInfo.value.title,
			  path: `/pages/Dormitory/VoteInfo/VoteInfo?id=${voteId.value}`,
			  mpPath:`/pages/Dormitory/VoteInfo/VoteInfo?id=${voteId.value}`
			}
	})
	
	onLoad((opt)=>{
		const {isNew,id} = opt
		voteId.value = id
		getVoteInfo()
		nextTick(()=>{
			uni.$emit('autoShowPushScreenAd')
		})
		timer.value = setInterval(()=>{
			getVoteInfo()
		},1000)
		if(isNew){
			nextTick(()=>{
				uni.$emit('tips','记得分享给室友哦','info',2000)
			})
		}
	})
	
	onUnmounted(()=>{
		clearInterval(timer.value)
	})
	
	onHide(()=>{
		clearInterval(timer.value)
	})
</script>

<style lang="less">
	.text_ellipsis{
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.join_box{
		display: grid;
		grid-template-columns: 68rpx 300rpx;
		align-items: center;
		color: v-bind(primary_text_color);
		margin-bottom: 20rpx;
		.user_name{
			margin-left: 20rpx;
		}
	}
	.random_join_record_box{
		height: calc(100vh);
		background-image: linear-gradient(to top, rgba(97,214,213,0),rgba(97,214,213,1));
		position: relative;
		.header_join{
			height: calc(18vh);
			padding: 20rpx;
			padding-top: 0;
			display: grid;
			grid-template-rows: 2fr 1fr;
			padding-bottom: calc(28rpx - 1vh);
			.top{
				display: grid;
				grid-template-columns: 3fr 2fr;
				font-size: 26rpx;
				color: v-bind(primary_text_color);
				.right{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: calc(40vw);
					.tip{
						width: 100%;
					}
					.title{
						font-size: 30rpx;
						font-weight: 800;
					}
				}
			}
		}
		.content_join{
			min-height: calc(82vh);
			background-color: #FFFFFF;
			margin: 0 20rpx 0 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding: 20rpx;
			padding-bottom: 200rpx;
			color: v-bind(primary_text_color);
			position: relative;
			.vote_item{
				.top{
					border: 1rpx solid v-bind(primary_line_color);
					border-radius: 13rpx;
					padding: 14rpx;
					display: grid;
					grid-template-columns: 150rpx 1fr 130rpx;
					align-items: center;
					column-gap: 20rpx;
					.nums{
						justify-self: end;
						align-self: center;
						color: v-bind(primary_hot_color);
						font-size: 40rpx;
						font-weight: 800rpx;
					}
				}
				.footer{
					margin-top: 10rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: row-reverse;
					.footer_border{
						display: flex;
						flex-direction: row-reverse;
						background-color: rgba(190,193,212,0.3);
						border-radius: 44rpx;
						padding: 5rpx 20rpx 5rpx 5rpx;
						.user{
							margin-right: 8rpx;
							display: flex;
							align-items: center;
						}						
					}
				}
			}
		}
		.footer_share{
			position: fixed;
			width: 100%;
			left: 50%;
			transform: translate(-50%,0);
			display: flex;
			bottom: 0rpx;
			background-color: #FFFFFF;
			padding-bottom: 50rpx;
			.invite_joiner{
				background-color: v-bind(primary_light_color);
				border: 0px solid v-bind(primary_light_color);
				color: #FFFFFF;
				margin: 0 20rpx;
				width: 100%;
			}
			.copy{
				background-color: v-bind(primary_text_color);
				border: 0px solid v-bind(primary_text_color);
				color: #FFFFFF;
				margin: 0 20rpx;
				width: 100%;
			}
		}
	}
</style>
